<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions" xmlns:c="http://java.sun.com/jsp/jstl/core">

	<p:dialog id="chuyenBanDialogId" header="Chuyển bàn" widgetVar="chuyenBanDialog" showEffect="fade" hideEffect="fade"
		resizable="false" modal="true" appendToBody="true" onHide="resetData()">
		<h:form id="chuyenBanFormId">
			<p:remoteCommand name="resetData" action="#{chuyenBan.resetData}" update="@form" />
			<f:facet name="header">
				<p:outputLabel>Chuyển từ bàn: #{danhSachBanKhuVuc.selectedBansLabel}<br />
				Tới bàn: #{chuyenBan.movedToBansLabel}</p:outputLabel>
			</f:facet>
			<p:tabView id="chuyenBanViewId" value="#{danhSachBanKhuVuc.kvDTOs}" var="kvDTO" style="width:100%;height:100%;">
				<p:tab title="#{kvDTO.khuVuc.name}">
					<p:dataGrid var="ban" value="#{kvDTO.bans}" columns="3">
						<p:commandLink id="banId" action="#{chuyenBan.onClickBan(ban)}" update="@form">
							<p:graphicImage library="icons"
								name="#{danhSachBanKhuVuc.isSelectedBan(ban)? 'blueCoffee48.png' : 'lightbrownCoffee48.png'}"
								style="#{chuyenBan.isMovedToBan(ban)? 'background:gray;' :''}" />
							<br />
							<p:outputLabel value="#{ban.name}" />
						</p:commandLink>
					</p:dataGrid>
					<p:commandButton value="Chuyển bàn" action="#{danhSachBanKhuVuc.moBan}" disabled="#{empty chuyenBan.movedToBans}" />
					<p:commandButton value="Hủy bỏ" immediate="true" onclick="chuyenBanDialog.hide()" />
				</p:tab>
			</p:tabView>
		</h:form>
	</p:dialog>
</ui:composition>